<template>
    <el-row class="headder">
        <el-col :span="20" class="title-row">
            <router-link to="/">
                <img :src="imgPath" alt="logo"/>
                <h2>{{siteTitle}}</h2>
            </router-link>
            <i>·</i>
            <router-link class="app-title" :to="appPath">{{appTitle}}</router-link>
        </el-col>
        <el-col :span="2" :offset="2">
            <slot></slot>
        </el-col>
    </el-row>
</template>
<script>
export default {
    props: {
        appPath: {
            require: true,
            type: String | Object,
            default: "" | {},
        },
        appTitle: {
            require: true,
            type: String,
            default: "",
        },
    },
    data() {
        return {
            baseUrl: process.env.BASE_URL,
            siteTitle: sessionStorage.getItem("siteTitle"),
			defaultPath: require('../../../public/logo3.png'),
        };
    },
    computed: {
        imgPath() {
            const path = sessionStorage.getItem("logoUrl");
            return path ? this.BASE_URL + path : this.defaultPath;
        },
    },
};
</script>
<style lang="scss">
.headder {
    padding:0 40px;
    height: 80px;
    line-height: 80px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(195, 195, 195, 0.3);
    .title-row{
        display: flex;
        align-items: center;
        a{
            display: flex;
            align-items: center;
        }
        img{
            height: 48px;
        }
        h2,i{
            font-size: 22px;
            font-weight: 700;
            padding-left: 10px;
        }
        h2{
            max-width:300px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .app-title{
            font-size: 16px;
            padding-left: 10px;
        }
        img,h2,.app-title{
            cursor: pointer;
        }
    }
}
</style>